<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 图标字体引入 -->
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/font-awesome.css">
</head>
<body>
  <div class="play_box">
    <video src="fun.mp4"></video>

    <!-- 控制栏 -->
    <div class="controls">  
     <!-- 播放按钮 -->
        <div class="l_play"><a href="javascript:;" class="fa fa-play"></a></div>  
     <!-- 进度条 -->
     <div class="progress">
         <div class="line"></div>
     </div> 
     <!-- 显示时间 -->
     <div class="tims">
        <div class="current">00:00:00</div>
        <div class="bar">/</div>
        <div class="total"></div>
     </div> 
     <!-- 全屏 -->
     <div class="fullscreen">
         <a href="javascript:;" class="fa fa-expand"></a>
     </div>
    </div>
  </div>
  <script>
    var video = document.querySelector('video');
    var play_btn = document.querySelector('.l_play a');
    var total = document.querySelector('.total');
    var current = document.querySelector('.current');
    var progress = document.querySelector('.progress');
    var line = document.querySelector('.line');
    var fullscreen = document.querySelector('.fullscreen a')
    video.addEventListener('canplay',function(){
      play_btn.onclick = function(){
        if(video.paused == true){
          video.play();
        }else{
          video.pause();
        }
        play_btn.classList.toggle('fa-pause')
      };
      total.innerText = get_time(this.duration);
      progress.onclick = function(e){
        // console.dir(e.offsetX)
        //当前播放时间 = 总长度/总时间*当前播放的位置
        video.currentTime = e.offsetX * video.duration / this.offsetWidth;
      };
      fullscreen.onclick = function(){
        video.webkitRequestFullScreen();
      };
    });
    video.addEventListener('timeupdate',function(){
      current.innerText = get_time(this.currentTime);
        //当前播放的位置 = 总长度/总时间*当前时间
        var current_width = progress.offsetWidth / this.duration * this.currentTime;
        line.style.width = current_width + 'px';
    });
    function get_time(total_time){
      var h = parseInt(total_time / 60 /60);
      var m = parseInt(total_time / 60);
      var s = parseInt(total_time % 60);
      h = h > 10 ? h : '0'+ h;
      m = m > 10 ? m : '0'+ m;
      s = s > 10 ? s : '0'+ s;
      var time_str = h+':'+m+':'+s;
      return time_str;
    }
  </script>
</body>
</html>